<template>
  <div class="wrap">
    <div class="commentWrap">
      <div class="commentItem">
        <img :src="$imgUrl + forumData.headImage" alt="" class="commentLeft" @click="jumpForumPersonCenter(forumData.userId)"/>
        <div class="commentRight">
          <div class="name">
            <em class="nameText">{{ forumData.nickName }}</em>
            <img
              src="@/assets/point.png"
              alt=""
              class="point"
              @click="replyOptions0(forumData, 0)"
            />
          </div>
          <div class="commentText">
            {{ forumData.content }}
          </div>
          <div class="commStatisticsWrap">
            <div class="date">{{ forumData.createTime }}</div>
            <div class="commStatisticsItem" @click="getAddCommentLike(forumData.id)">
              <img
                src="@/assets/redHeart.png"
                alt=""
                class="redHeart"
                v-if="forumData.isLike"
              />
              <img src="@/assets/greyHeart.png" alt="" class="redHeart" v-else />
              <em class="number number2">{{ forumData.likeNum }}</em>
            </div>
          </div>
        </div>
      </div>
      <div style="background-color: #f2f4fa; height: 5px"></div>
      <div class="commentItem" v-for="(item, index) in resReplyList" :key="index">
        <img :src="$imgUrl + item.fromHeadImage" alt="" class="commentLeft"  @click="jumpForumPersonCenter(item.fromUserId)"/>
        <div class="commentRight">
          <div class="name">
            <em class="nameText">{{ item.fromNickName }}</em>
            <img
              src="@/assets/point.png"
              alt=""
              class="point"
              @click="replyOptions1(item, 1)"
            />
          </div>
          <div class="commentText">
            <em class="replyWho" v-if="item.type == 1">回复@{{ item.toNickName }}</em>
            {{ item.content }}
          </div>
          <div
            class="commStatisticsWrap"
            style="border-bottom: 1px solid #e5e5e5; height: 10px"
          >
            <div class="date">{{ item.createTime }}</div>
            <!-- <div class="commStatisticsItem">
              <img src="@/assets/redHeart.png" alt="" class="redHeart" />
              <em class="number number2">15.2w</em>
            </div> -->
          </div>
        </div>
      </div>
    </div>
    <!-- <div class="commentRemark">
      <div class="input">
        <van-field
          v-model="message"
          rows="1"
          autosize
          type="textarea"
          placeholder="留下你的精彩评论吧"
        />
      </div>
      <img src="@/assets/at.png" alt="" class="at" />
      <img src="@/assets/emg.png" alt="" class="emg" />
    </div> -->
    <!-- 遮罩层-举报、删除、回复： -->
    <div class="maskWrap" v-if="show">
      <div class="maskBg" @click="show = false"></div>
      <div class="chooseNumWrap">
        <div class="optionsItem" @click="(showComment = true), (show = false)">回复</div>
        <div class="optionsItem" v-if="isDeleShow" @click="deleOptions">删除</div>
        <div class="optionsItem" @click="jumpReportkinds()" v-else>举报</div>
        <div class="optionsItem dele" @click="show = false">取消</div>
      </div>
    </div>
    <!-- 回复评论： -->
    <div class="maskWrap" v-if="showComment">
      <div class="maskBg" @click="showComment = false"></div>
      <div class="chooseNumWrap">
        <div class="input inputComment">
          <van-field
            v-model="replyContent"
            rows="1"
            autosize
            type="textarea"
            :placeholder="palceholderText"
          />
        </div>
        <div class="sendComment" @click="getPublishReply">发送</div>
      </div>
    </div>
  </div>
</template>

<script>
import { Field, Dialog } from "vant";
import {
  apiReplyList,
  apiAddCommentLike,
  apiPublishReply,
  apiDeleteCommentById,
  apiDeleteReplyById,
} from "@/request/api"; // api接口
export default {
  name: "App",
  data() {
    return {
      show: false,
      showComment: false,
      replyId: this.$route.query.replyId,
      forumId: this.$route.query.forumId,
      resReplyList: "", //评论里面的评论列表
      forumData: "", //楼主的评论信息
      replyContent: "", //评论评论的内容
      palceholderText: "回复评论",
      willRepyItemData: "",
      whichType: "", //0是回复楼主，1是回复评论的评论
      isDeleShow: "", //true-自己发布的评论显示删除，false非自己发布的评论显示举报
    };
  },
  mounted() {
    document.querySelector("body").setAttribute("style", "background-color:#F2F4FA");
    this.getReplyList();
  },
  methods: {
    //获取评论的回复列表：
    getReplyList() {
      apiReplyList({
        id: this.replyId,
      }).then((res) => {
        if (res.code == 200) {
          this.forumData = res.data;
          this.resReplyList = res.data.replyList;
          console.log("评论", this.resReplyList);
        }
      });
    },
    //点赞or取消：
    getAddCommentLike(id) {
      apiAddCommentLike({
        commentId: this.replyId,
      }).then((res) => {
        if (res.code == 200) {
          this.getReplyList();
        }
      });
    },
    replyOptions1(dataItem, i) {
      this.whichType = i;
      this.isDeleShow = dataItem.isCurrent;
      this.show = true;
      this.palceholderText = "回复" + dataItem.fromNickName + "的评论";
      this.willRepyItemData = dataItem;
    },
    replyOptions0(dataItem, i) {
      this.whichType = i;
      this.isDeleShow = dataItem.isCurrent;
      this.show = true;
      this.palceholderText = "回复" + dataItem.nickName + "的评论";
      this.willRepyItemData = dataItem;
    },
    //评论帖子的评论(3级评论相当于@功能type需传1,如果是回复楼主的评论则type==0)：
    getPublishReply() {
      var obj = "";
      if (this.whichType == 0) {
        obj = {
          commentId: this.replyId,
          content: this.replyContent,
          toUserId: this.willRepyItemData.userId,
          type: 0,
        };
      } else {
        obj = {
          commentId: this.replyId,
          content: this.replyContent,
          toUserId: this.willRepyItemData.fromUserId,
          type: 1,
        };
      }
      apiPublishReply(obj).then((res) => {
        if (res.code == 200) {
          this.showComment = false;
          this.replyContent = "";
          this.getReplyList();
        }
      });
    },
    //  删除操作：whichType：0-删除评论、1-删除回复
    deleOptions() {
      if (this.whichType == 0) {
        this.deleComment();
      } else {
        this.deleReply();
      }
    },
    //删除评论：
    deleComment() {
      var that = this;
      Dialog.confirm({
        message: "确定删除此评论?",
      })
        .then(() => {
          // on confirm
          apiDeleteCommentById({
            id: this.willRepyItemData.id,
          }).then((res) => {
            if (res.code == 200) {
              that.$toast.success("删除成功!");
              that.$router.push({
                path: "/pages/forumInfo",
                query: {
                  forumId: that.forumId,
                },
              });
            }
          });
        })
        .catch(() => {
          // on cancel
        });
    },
    //删除回复：
    deleReply() {
      apiDeleteReplyById({
        id: this.willRepyItemData.id,
      }).then((res) => {
        if (res.code == 200) {
          this.$toast.success("删除成功!");
          this.show=false
          this.getReplyList();
        }
      });
    },

    jumpReportkinds() {
      let obj = {
         dataJump: this.willRepyItemData,
        contentType: 1, //评论类型：1
      }
      this.$store.commit('reportPara',obj)
      this.$router.push({
        path: "/pages/reportkinds",
        query: obj,
      });
    },
    //跳转论坛个人主页
    jumpForumPersonCenter(id){
      this.$router.push({
        path: "/pages/forumPersonalCenter",
        query: {
          userId: id
        },
      });
    },
  },
  created() {},
  components: {
    [Field.name]: Field,
    [Dialog.name]: Dialog,
  },
};
</script>

<style scoped>
.redHeart {
  width: 13px;
  height: 11px;
}
.number {
  font-size: 10px;
  font-weight: 300;
  color: #181818;
  padding-left: 5px;
}
.commentWrap {
  width: 100%;
  background-color: #fff;
  border-radius: 20px 20px 0px 0px;
  margin-top: 10px;
}
.commentItem {
  padding: 15px 0px;
  overflow: hidden;
}
.commentLeft {
  width: 37px;
  height: 37px;
  border-radius: 37px;
  float: left;
  margin-left: 15px;
}
.commentRight {
  width: calc(100% - 30px - 37px - 10px);
  margin-left: 10px;
  float: left;
  font-weight: 400;
  color: #181818;
  font-size: 12px;
}
.name {
  font-size: 11px;
  width: 100%;
  display: flex;
  justify-content: space-between;
}
.nameText {
  display: inline-block;
}
.point {
  display: inline-block;
  width: 13px;
  height: 3px;
  margin-top: 5px;
}
.commentText {
  margin-top: 10px;
}
.replyWho {
  color: #f48f5b;
}
.commStatisticsWrap {
  width: calc(100% - 12px);
  padding-bottom: 15px;
  margin-top: 13px;
}
.date {
  float: left;
  font-size: 10px;
  font-weight: 300;
  color: #999999;
}
.commStatisticsItem {
  float: right;
}
.number2 {
  font-size: 10px;
  font-weight: 300;
  color: #999999;
}
.maskWrap {
}
.maskBg {
  width: 100%;
  min-height: 100vh;
  opacity: 0.35;
  background-color: #000;
  position: fixed;
  top: 0px;
}
.chooseNumWrap {
  width: 100%;
  background-color: #fff;
  position: fixed;
  bottom: 0px;
  border-radius: 20px 20px 0px 0px;
}
.inputComment {
  height: 100px;
}
.inputComment .van-cell {
  height: 80px !important;
}
.sendComment {
  float: right;
  margin-right: 5%;
  margin-top: 23px;
  background-color: #ff955e;
  font-size: 14px;
  padding: 5px 12px;
  border-radius: 5px;
  color: #fff;
}
.optionsItem {
  height: 50px;
  line-height: 50px;
  border-bottom: 1px solid #eee;
  color: #000;
  font-size: 14px;
  text-align: center;
}
.dele {
  background-color: #eee;
  border-radius: 20px;
  width: 90%;
  margin: 5px auto;
  height: 40px;
  line-height: 40px;
}
.commentRemark {
  width: 100%;
  position: fixed;
  bottom: 0;
  overflow: hidden;
  background: #ffffff;
  box-shadow: 0px 3px 12px 0px rgba(0, 0, 0, 0.12);
  border-radius: 24px 24px 0px 0px;
}
.input {
  float: left;
  border-radius: 20px;
  width: 70%;
  margin: 15px 20px;
}
.van-cell {
  border-radius: 20px;
  background-color: #f2f4fa;
}
.at {
  float: left;
  width: 18px;
  height: 18px;
  margin-top: 30px;
}
.emg {
  float: left;
  width: 18px;
  height: 18px;
  margin: 0px 20px 0px 16px;
  margin-top: 30px;
}
</style>
